<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #template {
        display: none;
      }

      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 自定义指令 -->
    <!-- <h1 v-xx:args.a.b.c="obj">{{value}}</h1> -->

    <!-- v-slot -->
    <!-- <Comp>
      <template v-slot:aa="value"></template>
    </Comp> -->

    <!-- v-text -->
    <!-- <h1 v-text="text"></h1> -->

    <!-- v-html -->
    <!-- <h1 v-html="text"></h1> -->

    <!-- v-show -->
    <!-- <h1 v-show="visible" @click="setVisible">111</h1> -->

    <!-- v-if, v-else-if, v-else -->
    <!-- <h1 v-if="visible">111</h1>
    <h1 v-else-if="visible2">111</h1>
    <h1 v-else-if="visible3">111</h1>
    <h1 v-else="visible4">111</h1> -->

    <!-- v-for -->
    <!-- <div v-for="item in obj" :key="item"></div> -->

    <!-- v-on -->
    <!-- <div v-on:click.right="add" @keydown="handleKeyDown"></div> -->

    <!-- v-bind -->
    <!-- <div v-bind:name="name" :age="age"></div> -->

    <!-- v-model -->
    <!-- <input v-model="value"></input> -->

    <!-- v-pre -->
    <!-- 
      <span v-pre v-for="i in 5">
        {{ this will not be compiled }}
        <span v-if="value" v-for="i in 5">{{i}}</span>
        {{i}}
        {{value}}
      </span>
     -->

    <!-- v-cloak -->
    <!-- <div v-cloak>{{visible}}</div> -->

    <!-- v-once -->
    <!-- <div v-once>{{visible}}</div> -->


    <div id="template">
      <div>
        <div v-memo="[visible]">{{visible}}</div>
      </div>
    </div>
    <div id="app"></div>
    <script src="../../../packages/vue/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue

      const template = document.querySelector('#template')?.innerHTML
      const App = {
        setup() {
          const visible = ref(true)
          const setVisible = () => (visible.value = !visible.value)
          return {
            visible,
            'this will not be compiled': 'value',
            setVisible
          }
        },
        components: {
          Comp: {
            template: `<div>
              <slot name="aa" props="xx" />
              <slot name="bb" props="yy" />
            </div>`
          }
        },
        // template: `<Comp>
        //   <template v-slot:aa="{props}">
        //     {{props}}
        //   </template>
        //   <template v-slot:bb="{props}">
        //     {{props}}
        //   </template>
        // </Comp>`,
        template,
        directives: {
          xx: {}
        }
      }

      createApp(App).mount('#app')

      function render(_ctx, _cache) {
        with (_ctx) {
          const {
            setBlockTracking: _setBlockTracking,
            toDisplayString: _toDisplayString,
            createTextVNode: _createTextVNode,
            createElementVNode: _createElementVNode
          } = _Vue

          return (
            _cache[0] ||
            (_setBlockTracking(-1),
            (_cache[0] = _createElementVNode('div', null, [
              _createTextVNode(_toDisplayString(visible), 1 /* TEXT */)
            ])),
            _setBlockTracking(1),
            _cache[0])
          )
        }
      }
    </script>
  </body>
</html>
